<link rel="stylesheet" media="screen" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">

<div class="form">
  <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Product/singleEdit',array('id'=>$id))}">
    <dl>
      <dt> 类型：</dt>
      <dd>
          <select name="type">
            <option value="1" <if condition="$info['type'] eq '1'">selected</if>>附加保险</option>
            <option value="2" <if condition="$info['type'] eq '2'">selected</if>>附加产品</option>
            <option value="3" <if condition="$info['type'] eq '3'">selected</if>>包含单品</option>
            <option value="4" <if condition="$info['type'] eq '4'">selected</if>>赠送单品</option>
          </select>
      </dd>
    </dl>
    <dl>
      <dt>标题：</dt>
      <dd>
        <input id="title" name="title" class="inp_w550" value="{$info.title}" required type="text"/>
      </dd>
    </dl>
    <dl>
      <dt> 价格：</dt>
      <dd>
        <input id="price" name="price" class="inp_one" value="{$info.price}" required type="text"/>
      </dd>
    </dl>
    <dl>
     <dt> 图片：</dt>
     <dd>
      <div>
        <input type="button" class="button-green" value="上传图片" onclick="uploadImgHtml('uploadImg')">
      </div>
       <div style="width: 134px; height: 134px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
         <div id="uploadImg" class="fileupload" style="  position: absolute;width: 134px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
            <img src="{$info.uploadImg}" width='134' height='134'>
            <input type="hidden" name="uploadImg" value="{$info.uploadImg}">
         </div>
       </div>
     </dd>
    </dl>
    <div class="form_b" style="width: 300px; margin-left: 110px;">
      <button class="submit button-green" type="submit">保 存</button>
      &nbsp;
      <input type="button" onclick="goUrl('{:U(MODULE_NAME."/Product/singleList")}')" class="button-return" value="返回产品列表">
    </div>
  </form>
</div>

<script src="/Public/plugin/validation/lib/jquery.js" type="text/javascript"></script>
<script src="/Public/plugin/validation/dist/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

  $("#form_do").validate({
    rules: {
        title: {
            required: true,
            maxlength: 30
           },
        price: {
            required: true
           }
        },
        messages: {
          title: {
            required: "标题不能为空",
            minlength: "标题不得超过30个字符"
          },
          price: {
            required: "价格不能为空",
          }
        }
    });

  $("#uploadImg_form").validate();


});

/**
 * [uploadImgHtml description]
 * @return {[type]} [description]
 */
function uploadImgHtml(thumbImages)
{

  var cityID     = $('select[name="cityID[]"]:first').val();

  //iframe层-父子操作
  var Div = layer.open({
              type: 2,
              area: ['800px', '400px'],
              content: ['/Home/Public/uploadImages.html?type=Single&sizeType=0','no'],
              btn: ['确认','取消'], //按钮
              yes: function(index, layero){ //或者使用btn1
                  //按钮【按钮一】的回调

                  var obj = $(window.frames['layui-layer-iframe'+index].document);
                  var object = obj.find("#selectImg ul li .curr");
                  if(object.length <= 0)
                  {
                    var imgUrl = obj.find("#dndArea input[name='fileData[]']").val();
                  }
                  else
                  {
                    var imgUrl = object.parent().find('img').attr('src')
                  }

                  $('#'+thumbImages).empty();
                  $('#'+thumbImages).append('<img src="'+imgUrl+'" width="100%" height="100%"><input type="hidden" name="'+thumbImages+'" class="headerImg" value="'+imgUrl+'">');
                  layer.close(Div);
              },
              cancel: function(index){ //或者使用btn2
                  //按钮【按钮二】的回调
                  layer.close(Div);
              }
          });
}
</script>